//职位模块
import React, {Component} from 'react'
import {ScrollView, View,} from 'react-native';

import Posintop from './every/posintop';
import Postwo from './every/postwo';
import Posthree from './every/posthree';
import Posfour from './every/posfour';
import Posfive from './every/posfive';
import Possix from './every/possix';
import Posseven from './every/posseven';
import Loading from '../../../util/loading/loading';

import {DeleteCollectAction, InsertCollectAction, SelPosInfoAction} from '../../../actions/postionAction'; //加载action //加载action
import {SendPostionAction} from '../../../actions/postionSendAction'; //加载action
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

class Postionin extends Component {
    // 初始化模拟数据
    constructor(props) {            //构造器只执行一次
        super(props);
        this.state = {
            isloading: true
        }
    };

    //加载后渲染页面
    componentDidMount() {
        this.props.actions.SelPosInfoAction({postionId: this.props.navigation.state.params.useId}); //初始化查询
    }

    componentDidUpdate() {
        if (!this.props.xzPostion.isloading && this.state.isloading) {
            this.setState({isloading: false})
        }
    }

    render() {
        const {xzPostion} = this.props.xzPostion.data;
        if (this.state.isloading) {
            return (
                // <View style={{
                //     marginVertical: 10, height: 100, alignItems: 'center', justifyContent: 'flex-end'
                // }}>
                //     <Text>玩命加载ing</Text>
                // </View>
                <Loading/>
            );
        } else {
            //else if ret判断错误情况
            return (
                <View style={{flex: 1, backgroundColor: '#F6f6f6'}}>
                    <Posintop navigation={this.props.navigation}/>
                    <ScrollView style={{flex: 1}}>
                        <Postwo xzPostion={xzPostion}/>
                        <Posthree xzPostion={xzPostion} navigation={this.props.navigation}/>
                        <Posfour xzPostion={xzPostion} navigation={this.props.navigation}/>
                        <Posfive postionId={this.props.navigation.state.params.useId}
                                 navigation={this.props.navigation}/>
                        <Possix/>
                        <Posseven
                            postionId={this.props.navigation.state.params.useId}
                            actions={this.props.actions}
                            collectState={this.props.xzPostion.data.CollectState}
                            selisSend={this.props.xzPostion.data.selisSend}
                        />
                    </ScrollView>
                </View>
            )
        }
    }
}

//组合action
let actions = {
    SelPosInfoAction,
    InsertCollectAction,
    DeleteCollectAction,
    SendPostionAction,
};

//连接state到props
const mapStateToProps = state => {
    return {
        xzPostion: state.SelPosInfoReducer             //自己的reducers
    }
};

//连接action
const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators(actions, dispatch)
    }
};

//导出组合好的组件(组合后状态改变重新渲染组合组件的页面)
export default connect(
    mapStateToProps, mapDispatchToProps
)(Postionin);